<template>
  <div class="type-sessdata">
    <el-page-header @back="goBack" content="使用 SESSDATA 登陆"></el-page-header>
    <div class="content-wrap">
      <div class="content">
        <div class="input-area">
          <el-input v-model="input" placeholder="请输入 SESSDATA"></el-input>
          <el-button
            type="primary"
            class="submit-button"
            :loading="submitLoading"
            @click="submit"
          >登陆</el-button>
        </div>
        <div
          class="tip"
        >说明：在登陆的状态下，按 F12 打开开发者工具，选择上方的 Application 标签，选择 Cookies，选择对应域名 https://wiki.biligame.com，在右边即可查看到 SESSDATA 的值。</div>
      </div>
    </div>
  </div>
</template>

<script>
const { ipcRenderer } = window.require('electron')

export default {
  name: 'LoginTypeSessdata',
  data() {
    return {
      input: '',
      submitLoading: false
    }
  },
  methods: {
    submit() {
      if (!this.input) {
        this.$message.error('请填写 SESSDATA')
        return
      }

      this.submitLoading = true

      let a = ipcRenderer.sendSync('set-sessdata', this.input)

      axios.get('https://wiki.biligame.com/wiki/api.php', {
        params: {
          action: 'query',
          meta: 'tokens',
          format: 'json'
        }
      })
        .then((response) => {
          this.submitLoading = false
          let csrftoken = response.data.query.tokens.csrftoken

          if (csrftoken !== '+\\') {
            this.$message({
              message: '登陆成功',
              type: 'success'
            })
            this.$router.push({ name: 'Home' })
          }
          else {
            this.$message.error('登陆失败，请检查 SESSDATA 填写是否正确')
          }
        })
        .catch((error) => {
          this.submitLoading = false
          console.log(error)
        })
    },
    goBack() {
      this.$router.push({ name: 'LoginIndex' })
    }
  },
}
</script>

<style lang="scss" scoped>
.type-sessdata {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .el-page-header {
    padding: 18px;
    border-bottom: 1px solid #dcdfe6;
  }
  .content-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    .content {
      width: 500px;
      max-width: 500px;
      .input-area {
        display: flex;
        .submit-button {
          margin-left: 20px;
          width: 110px;
        }
      }
      .tip {
        margin-top: 20px;
        font-size: 14px;
        color: #909399;
      }
    }
  }
}
</style>